
@media screen and (max-width: 1500px) {

    .top-img,.side,#sub_menu,#tags,#sidebar{display:none;}

	html,body,#wrapper{
        width:100%;
        transform:none;
    }
	
	#topbar{ /*background-size: cover; margin:10px;*/ transform: none; /*margin-top: 20px;*/ 
		width: 100%; background-position: center; text-align: center; background-size: cover; }
	.top-video{ height: 400px;  }

	.sf-menu a { font-size: 1rem; }

	.index_wrap{ margin-top: 300px; width: 100%; }


    .category{ width: 32%; }
    .works-item,.works-img,.works-img img,
    #category-picture1,#category-picture2,#category-picture3
    { width: 100%; min-height: 200px;height:auto; }
    #categorywrap { width:100%; padding: 0%; margin: 0; margin-left: 10px; padding-top: 10px; padding-bottom: 20px;}
    #categorywrap .view-all,#categorywrap .view-all a{ width: 100%; background: rgba(10, 10, 10, 0.5); }
    .works-img img{ margin-left: -50%; top:0; margin-top: 0;}

	

    #news_list {width: 95%; margin:auto; margin-top: 20px; }
    #news_list a{ float: left; width: 30%; text-align: left; margin: auto; }
    #news_list a:nth-child(3n){float:right;}

    #words {margin: 20px;}

    #footer{width: 100%; background-position: center; text-align: center; background-size: cover;}
    #footer .info{ float: none; }


    #sidebar{ margin-right: 0; }
    #blogcategory { display: block; position: absolute; top: 0;right: 0; }

    #introtext { margin-left: 20px; margin-right: 20px; }

    #content{margin: 20px auto; /*width: 940px;*/ width: 100%; }
	#wrapper .left-article,.left-article .area {width: auto; margin:auto 20px;}

	.left-article iframe { height: 60vw; }
	.left-article img { width: 100%; max-width: 100%; }


	.portfolioitem ul li { width: 33%; }
    .portfolioitem ul li a img { margin: 0; left: 0; top: 0; width: 100%; height: auto; }
}

@media screen and (max-width: 960px) {

    .top-video,.top-img,.side,#sub_menu,#footer span,#friend_link,#introtext {display:none;}

    html,body,#topbar,#wrapper,#footer {
        width:100%;
        /*        
        transform:scale(1);transform-origin: center top;
		-webkit-transform: scale(1);     
        -moz-transform: scale(1);        
        -ms-transform: scale(1);         
        -o-transform: scale(1);  
         */
        transform:none;

    }
    html,body{/*overflow-x:hidden;position: relative;*/ }

	#index-topbar{ /*background: rgba(0, 0, 0, 0.7);*/ background: none; background-image: url(../images/topbar.png);
	background-position: center center;
	background-repeat: no-repeat;
	height: 60px;
	padding: 0;

}

	#topbar #secnav { display: block; position:; width: auto; margin:0; right: 0px; margin-right: 10px; top:13px; }
	#topbar #secnav a,#topbar #secnav a:hover,#topbar #secnav a:visited,#topbar #secnav a:active {background: none; font-size: 1.5em;}

	#topbar{ z-index: 999; border-radius: 5px;background-size:unset; }	
	.menu {width: 100%; /*position:static;*/ left: 0;top: 60px; padding-bottom: 50px; }
	.sf-menu a{font-size:.9rem; color: #333; font-family: 微软雅黑,黑体; text-decoration: underline;}


	#categorywrap{ padding: 0px auto; width: 100%; margin:auto; text-align: center; }
	.category {width: 90%; margin: auto; float: none;}
	.category a, 
	.category img ,#category-picture1,#category-picture2,#category-picture3,.works-img img,
	#categorywrap .view-all a,#categorywrap .view-all, #categorywrap-blog .view-all{
		width: 100%;
	}

	/*.category-middle{ margin:0px 0 0 0; }*/
	 
	.category strong a,.category-middle strong a { text-align: center; margin-top: 10px; font-size: 1.2rem;}
	#categorywrap a{ text-decoration: underline; }

	#categorywrap .view-all, #categorywrap-blog .view-all{ background: rgba(10, 10, 10, 0.5); }


	#category-picture1,#category-picture2,#category-picture3 { height: auto; }
	
	.works-img {  }
	.works-img img{ min-height: 200px; height:auto; margin-left: -50%; margin-top:0; top: 0;}

    #slider,#slider img {width: 100%;}



    #wrapper{ position: relative; transform: none;}
    .index_wrap{ margin-top: 50px; }

    #news_list {width: 100%; height: 200px; overflow: auto; overflow-x: hidden; margin-top: 20px; }
    #news_list a ,#news_list a:nth-child(3n){ float: none; width: 90%; text-align: left; margin: auto; }

    #words{height: 1px; overflow: hidden; margin:20px 0 0 0; padding:0;}

    #footer{ background: rgba(0, 0, 0, 0.8); margin:0; margin-top: 20px; /* position: fixed; bottom: 0; */ }
    #footer .info{ float: none; text-align: center;}


    /*内页*/

    #wrapper .left-article,#content{ width: 100%; margin: auto;} 

    .left-article .area { margin: 10px; width:auto; }
    .left-article p, .left-article div{width: auto; word-wrap: break-word; padding-top: 0;}
    .left-article h1{ margin-top: 10px; border-top: 1px solid #aaa; padding-top: 10px; text-align: center; background: rgba(0,0,0,0.6);color: #eee;  }

    .left-article .video {position: -webkit-sticky; position: sticky;  top: 0; }

    
    .portfolioitem{ margin-top: 60px; border-top: 0px solid #aaa; padding-top: 20px; }
    .portfolioitem ul li{width: 100%;}

	#content{margin-top: 50px;}
	#content,.portfolioitem{background-image: url(../images/bgbody.jpg); background-size: cover; background-repeat: no-repeat; }

    #content .left-article .title .commentbubble{ display: none; }
    #content .left-article .title .infobubble{ width: 100%; background-size: cover; display: none; }

    .blog-img,.blog-img img{ float: none;width: 100%; height: auto; margin: 0;top: 0; left: 0;
    	box-shadow: 0px 2px 10px #333; border-radius: 5px;-webkit-border-radius:5px; }

    .blog-img .nopic{ display: none; }

    #wrapper .left-article {float: none; padding: 10px 0 0 0; margin:10px; width: auto; border: none;}
    .left-article .title{ float: none; background: rgba(0,0,0,0.7); margin-top: 5px; width: 100%; height: 30px; overflow: hidden; line-height: 30px;
     border-radius:5px;}
    .left-article .title a{  color: #eee; font-size: 1rem; padding-left: 8px; }
    .left-article .content{ width: auto; float: none; }


	.left-article #work_title { display: block; background: none; border-top: 1px solid #aaa; color:#d56528; }
	.left-article .info { display: none; }
	.left-article iframe { min-height: 250px; }
	.left-article img{  margin-top: 0px; }

	

	.contact_introtext{ display: none; }
	.contact_wrapper{ width: 100%; margin-top: 50px; }	
	#contact_left,#contact_right { width: 100%; padding: 0px; float: none; }
	#contact_form textarea,#contact_form .inp1, #contact_form .inp2{ display: block; width: 90%; margin:10px auto; }
	#contact_form input{display: block;width: 90%; margin: auto;}

	#contact_right { font-size: 1rem; }
	#contact_right br {display: none;}
	#contact_right ul { margin: 5px 20px; }
	#contact_right li { display: block; margin-top: 10px;  }
	#contact_right li h2{ width: 90px; float: left;font-size: 1.2rem; }
	#contact_right .qq,#contact_right .add,#contact_right .url {display: none;}
}
	 

